<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 304 304"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="url(#f9a85__a)" d="M284.017 115.376c-4.612-4.809-9.369-9.775-10.928-13.536-1.389-3.355-1.494-10.26-1.586-16.34-.196-13.103-.445-29.404-12.029-40.974-11.583-11.57-27.871-11.794-40.974-12.03-6.08-.091-12.986-.196-16.34-1.585-3.761-1.56-8.727-6.316-13.536-10.928C179.347 11.085 167.79 0 152 0c-15.79 0-27.347 11.085-36.624 19.983-4.809 4.612-9.775 9.369-13.536 10.928-3.355 1.389-10.26 1.494-16.34 1.586-13.103.262-29.404.445-40.948 12.055S32.759 72.397 32.497 85.5c-.092 6.08-.197 12.986-1.586 16.34-1.56 3.761-6.316 8.727-10.928 13.536C11.085 124.653 0 136.276 0 152c0 15.724 11.085 27.347 19.983 36.69 4.612 4.809 9.369 9.775 10.928 13.536 1.389 3.354 1.494 10.26 1.586 16.34.196 13.103.445 29.404 12.029 40.974 11.583 11.57 27.87 11.793 40.974 12.029 6.08.092 12.986.197 16.34 1.585 3.761 1.56 8.727 6.316 13.536 10.929C124.653 292.914 136.276 304 152 304c15.724 0 27.347-11.086 36.624-19.983 4.809-4.612 9.775-9.369 13.536-10.928 3.354-1.389 10.26-1.494 16.34-1.586 13.103-.196 29.404-.445 40.974-12.029 11.571-11.583 11.794-27.871 12.029-40.974.092-6.08.197-12.986 1.586-16.34 1.559-3.761 6.316-8.727 10.928-13.536C292.914 179.347 304 167.79 304 152c0-15.79-11.086-27.347-19.983-36.624Zm-22.695 51.483c-6.316 6.552-13.47 14.047-17.283 23.272-3.696 8.91-3.84 18.555-3.931 27.897-.105 7.024-.249 16.655-2.818 19.21-2.568 2.555-12.186 2.712-19.209 2.817-9.343.144-18.987.288-27.898 3.931-9.172 3.813-16.68 10.968-23.271 17.284-4.718 4.52-11.767 11.282-14.912 11.282-3.145 0-10.194-6.762-14.859-11.23-6.552-6.316-14.047-13.47-23.272-17.283-8.91-3.696-18.555-3.84-27.897-3.931-7.024-.105-16.655-.249-19.21-2.818-2.555-2.568-2.712-12.186-2.817-19.209-.144-9.343-.288-18.987-3.931-27.898-3.813-9.172-10.968-16.68-17.284-23.271-4.52-4.718-11.282-11.767-11.282-14.912 0-3.145 6.762-10.194 11.23-14.859 6.316-6.552 13.47-14.047 17.283-23.272 3.696-8.91 3.84-18.555 3.931-27.897.158-7.024.315-16.655 2.936-19.144 2.62-2.49 12.186-2.713 19.21-2.818 9.342-.144 18.986-.288 27.896-3.93 9.173-3.814 16.681-10.968 23.272-17.284 4.6-4.586 11.649-11.348 14.794-11.348 3.145 0 10.194 6.762 14.859 11.23 6.552 6.316 14.047 13.47 23.272 17.283 8.91 3.696 18.555 3.84 27.897 3.931 7.024.105 16.655.25 19.21 2.818 2.555 2.568 2.712 12.186 2.817 19.21.144 9.342.288 18.986 3.931 27.897 3.813 9.172 10.968 16.68 17.284 23.271 4.468 4.665 11.229 11.715 11.229 14.86 0 3.144-6.709 10.246-11.177 14.911Zm-45.783-57.432a15.716 15.716 0 0 1 4.624 11.138 15.718 15.718 0 0 1-4.624 11.138l-73.38 73.379a15.724 15.724 0 0 1-22.276 0l-31.448-31.448a15.755 15.755 0 0 1-3.414-17.166 15.755 15.755 0 0 1 20.58-8.525 15.758 15.758 0 0 1 5.11 3.415l20.323 20.297 62.255-62.267a15.723 15.723 0 0 1 22.25.039Z"/><rect stroke-width="6" stroke="url(#f9a85__b)" fill="#fff" rx="13" height="172" width="148" y="43" x="36"/><rect fill="#BCD6EE" rx="6" height="12" width="99" y="65.658" x="51.267"/><path fill="#BCD6EE" d="m108.237 87.798.9 1.6-2.74 1.02 2.74 1.02-.92 1.64-2.28-1.8.42 2.9h-1.84l.38-2.9-2.28 1.84-.96-1.7 2.72-1.02-2.72-.98.92-1.64 2.34 1.8-.4-2.92h1.86l-.44 2.92 2.3-1.78Zm-10.077 0 .9 1.6-2.74 1.02 2.74 1.02-.92 1.64-2.28-1.8.42 2.9h-1.84l.38-2.9-2.28 1.84-.96-1.7 2.72-1.02-2.72-.98.92-1.64 2.34 1.8-.4-2.92h1.86l-.44 2.92 2.3-1.78Zm-10.079 0 .9 1.6-2.74 1.02 2.74 1.02-.92 1.64-2.28-1.8.42 2.9h-1.84l.38-2.9-2.28 1.84-.96-1.7 2.72-1.02-2.72-.98.92-1.64 2.34 1.8-.4-2.92h1.86l-.44 2.92 2.3-1.78Zm-10.078 0 .9 1.6-2.74 1.02 2.74 1.02-.92 1.64-2.28-1.8.42 2.9h-1.84l.38-2.9-2.28 1.84-.96-1.7 2.72-1.02-2.72-.98.92-1.64 2.34 1.8-.4-2.92h1.86l-.44 2.92 2.3-1.78Zm-10.078 0 .9 1.6-2.74 1.02 2.74 1.02-.92 1.64-2.28-1.8.42 2.9h-1.84l.38-2.9-2.28 1.84-.96-1.7 2.72-1.02-2.72-.98.92-1.64 2.34 1.8-.4-2.92h1.86l-.44 2.92 2.3-1.78Zm-10.078 0 .9 1.6-2.74 1.02 2.74 1.02-.92 1.64-2.28-1.8.42 2.9h-1.84l.38-2.9-2.28 1.84-.96-1.7 2.72-1.02-2.72-.98.92-1.64 2.34 1.8-.4-2.92h1.86l-.44 2.92 2.3-1.78Z"/><rect fill="#BCD6EE" rx="6" height="12" width="104" y="103.178" x="51.267"/><rect fill="#BCD6EE" rx="6" height="12" width="104" y="124.178" x="51.267"/><rect fill="#BCD6EE" rx="6" height="12" width="84" y="145.178" x="51.267"/><rect fill="#BCD6EE" rx="6" height="12" width="69" y="166.178" x="51.267"/><rect stroke-width="6" stroke="url(#f9a85__c)" fill="url(#f9a85__d)" rx="13" height="134.087" width="129.054" y="135.434" x="147.663"/><rect fill="#06F" rx="6" height="12" width="102" y="158.439" x="161.44"/><rect fill="#06F" rx="6" height="12" width="84" y="185.439" x="161.44"/><path fill="#06F" d="M229.469 220.683a11.124 11.124 0 0 1 21.024-5.065 11.123 11.123 0 0 1-5.134 15.118v7.427h11.122a7.945 7.945 0 0 1 7.945 7.945v4.767h-47.669v-4.767a7.945 7.945 0 0 1 7.945-7.945h11.123v-7.427a11.125 11.125 0 0 1-6.356-10.053Zm-12.712 33.37v3.178h47.669v-3.178h-47.669Z"/><circle fill="#10CE00" r="25.183" cy="264.426" cx="158.296"/><path fill="#fff" d="M172.564 255.509a3.359 3.359 0 0 1 .525 4.72l-13.431 16.789a3.358 3.358 0 0 1-4.881.387l-9.234-8.395a3.358 3.358 0 0 1 4.517-4.969l6.588 5.989 11.197-13.996a3.358 3.358 0 0 1 4.719-.525Z" clip-rule="evenodd" fill-rule="evenodd"/><path fill="url(#f9a85__e)" d="M109.437 184.961C90.59 178.827 80.047 158.739 77 148.766L98.232 138c-1.514 10.379 14.286 21.215 24.699 26.588l9.093-13.728 3.887 37.978-34.39 8.074 7.916-11.951Z" clip-rule="evenodd" fill-rule="evenodd"/><path fill="#C41DFF" d="m258.375 168.35 29.106-28.063a5.275 5.275 0 0 1 7.46.136 5.275 5.275 0 0 1-.136 7.46l-29.107 28.063-7.323-7.596Zm-2.619 2.142-.589.18-9.231 2.766a4.096 4.096 0 0 0-2.71 2.626l-5.675 16.92a2.043 2.043 0 0 0 .467 2.074l9.84-9.83a3.074 3.074 0 1 1 5.849-1.326 3.075 3.075 0 0 1-4.401 2.773l-9.84 9.837a2.037 2.037 0 0 0 2.076.468l16.931-5.674a4.11 4.11 0 0 0 2.626-2.709l2.767-9.229.18-.589-8.29-8.287Z"/><defs><linearGradient gradientUnits="userSpaceOnUse" y2="324.686" x2="240.592" y1="50.817" x1="0" id="f9a85__a"><stop stop-color="#06F"/><stop stop-opacity=".4" stop-color="#FA00FF" offset="1"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="218" x2="110" y1="40" x1="110" id="f9a85__b"><stop stop-color="#61BDFF"/><stop stop-opacity=".69" stop-color="#E764EA" offset="1"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="290.06" x2="212.26" y1="-78.248" x1="212.26" id="f9a85__d"><stop stop-color="#5BADFF"/><stop stop-color="#DAF6FF" offset="1"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="272.52" x2="212.189" y1="132.434" x1="212.189" id="f9a85__c"><stop stop-color="#06F"/><stop stop-color="#00FF38" offset="1"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="182.521" x2="135.462" y1="146.994" x1="91.391" id="f9a85__e"><stop stop-color="#06F"/><stop stop-color="#00C42B" offset="1"/></linearGradient></defs></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconCompliaceTitle extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
